<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弹性盒实现移动端布局框架</title>
  <link rel="stylesheet" href="fonts/iconfont.css" media="screen" title="no title" charset="utf-8">
  <style>
    /*去掉滚动条*/
    ::-webkit-scrollbar{
      width: 0;
      height: 0;
    }
    /*去掉链接遮罩*/
    /*a{
      -webkit-tap-highlight-color:rgb(231,152,33);
    }*/
    html,body,ul{
        margin:0;
        padding: 0;
    }
    html,body{
      width: 100%;
      height: 100%;
    }
    ul li{
      list-style: none;
    }
    .wrapper{
      display: flex;
      flex-direction:column;
      height: 100%;
      width: 100%;
    }
    /*.header,.container,.nav{
      width: 100%;
    }*/
    .header{
      height: 48px;
      background-color: rgb(166, 209, 152);
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      /*flex-direction:column;*/
    }
    .header div{
      height: 48px;
      text-align: center;
      line-height:48px;
      padding: 0 10px;
      font-size:24px;
      color:rgb(50, 54, 53);
    }
    .header div.retur::before{
      content: "\e61d";
      flex-grow: 1;
    }
    .header div.conta{
      flex-grow: 2;
      font-weight: bold;
      color:rgb(149, 143, 22);
    }
    .header div.user::before{
      content: "\e610";
      flex-grow: 1;
    }
    .container{
      flex-grow: 1;
      /*background: green;*/
      overflow-y: auto;

    }
    .container ul{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }
    .container ul li{
      width: 30%;
      height: 100px;
      line-height: 100px;
      text-align: center;
      color:rgb(157, 187, 20);
      background: rgb(51, 158, 129);
      margin: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.72);
      position: relative;
    }
    .container ul li::before{
      content: '';
      position: absolute;
      width: 80%;
      height: 50px;
      background: rgba(255, 255, 255,1);
      left: 10%;
      bottom: 0;
      border-radius: 50%/10px;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
      z-index: -1;
    }
    .nav{
      height: 48px;
      background-color:rgb(151, 166, 147);
      flex-shrink: 0;
    }
    .nav ul{
      height: 100%;
      display: flex;
      align-items:center;
    }
    .nav ul li{
      width: 20%;
      font-size: 10px;
      text-align: center;
      color:rgb(50, 54, 53);
      /*background: red;*/
    }
    .nav ul li.classify::before{
      content:"\e603";
    }
    .nav ul li.indent::before{
      content:"\e622";
    }
    .nav ul li.shopCart::before{
      content:"\e652";
    }
    .nav ul li.set::before{
      content:"\e779";
    }
    .nav ul li.remind::before{
      content:"\e844";
    }
    .nav ul li:hover{
      color: rgb(20, 156, 30);
    }

  </style>
</head>
<body>
  <div class="wrapper">
    <header class="header">
      <div class="retur iconfont"></div>
      <div class="conta">美团外卖</div>
      <div class="user iconfont"></div>
    </header>
    <div class="container">
      <ul>
        <li>item-1</li>
        <li>item-2</li>
        <li>item-3</li>
        <li>item-4</li>
        <li>item-5</li>
        <li>item-6</li>
        <li>item-7</li>
        <li>item-8</li>
        <li>item-9</li>
        <li>item-10</li>
        <li>item-11</li>
        <li>item-12</li>
        <li>item-13</li>
        <li>item-14</li>
        <li>item-15</li>
        <li>item-16</li>
      </ul>
    </div>
    <nav class="nav">
      <ul>
        <li class="classify iconfont">&nbsp;分类</li>
        <li class="indent iconfont">&nbsp;订单</li>
        <li class="shopCart iconfont">&nbsp;购物车</li>
        <li class="set iconfont">&nbsp;设置</li>
        <li class="remind iconfont">&nbsp;提醒</li>
      </ul>
    </nav>
  </div>
</body>
</html>
